<template>
	<view class="index">
		<uni-nav-bar fixed="true" status-bar="true" left-icon="back">
		   <view class="search">
			   <input type="text" v-model="keyword"  value="" placeholder="宝贝名称" :focus="true" confirm-type="search" @confirm="search()"/> 
			   <view class="btn" @tap="search()">搜索</view>
		   </view>	   
		</uni-nav-bar>
		
		<block v-if="goods.length > 0">
			<goods-list :goods="goods" showType="2"></goods-list>
		</block>
		<view class="no-data" v-else>没有相关商品</view>
	</view>
</template>

<script>
	import uniNavBar from '../../components/uni-nav-bar.vue';
	import Request from '../../common/request.js';
	import goodsList from '../../components/goods-list.vue';
	
	export default {
		components: {
			uniNavBar, goodsList
		},
		data() {
			return {
				keyword: '',
				goods: [],
				page: 1,
				nextPage: true
			};
		},
		onLoad(options) {
			this.keyword = options.keyword;
			this.getGoods();	
		},
		onReachBottom() {
			this.getGoods();
		},
		methods: {
			
			//搜索
			search: function(){
				
				var keyword = this.keyword;
				if(!keyword) {
					Request.send('请输入要搜索的内容');
					return ;
				}
				
				var history = uni.getStorageSync('searchHistory');
				
				if(history) {
					history = history.split(',');
					history.forEach(function(item, index){
						if(item == keyword) {
							history.splice(index,1);
						}
						
						if(index > 6) {
							history.splice(index,1);
						}
					});

					history = history.toString();
					history = keyword+','+history;
					uni.setStorageSync('searchHistory', history);
				} else {
					uni.setStorageSync('searchHistory', keyword);
				}
				
				this.page = 1;
				this.goods = [];
				this.nextPage = true;
				
			},
			//查找商品
			getGoods() {
				if(this.nextPage == false) {
					return ;
				}
				
				var that = this;
				Request.send({
					url: 'goods/search',
					data: {
						keyword: that.keyword,
						page: that.page
					},
					sCallback: function(res) {
						that.goods = that.goods.concat(res.data);
						that.page ++;
						if(res.data.length < 20) {
							that.nextPage = false;
						}
					}
				})
			}
		}
		
	}
</script>

<style>
	page{
		background: #fff;
	}
	.index .search{
		display: flex;
		flex-direction: row;
		font-size: 24upx;
		align-items: center;
	}
	
	.index .search input{
		flex: 1;
		caret-color: red;
	}
		
	.index .search .btn{
		padding: 0 40upx;
		color: #666;
	}
	
	.content {
		padding: 20upx;
		color: #666;
	}
	
	.content .history{
		margin-bottom: 40upx;
	}
	
	.content .header{
		display: flex;
		justify-content: space-between;
		height: 80upx;
		align-items: center;
		font-size: 20upx;
	}
	
	.content .header .right{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.content .header .right .iconfont{
		margin-right: 10upx;
	}
	
	.content .list{
		width: 710upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.content .list .item{
		font-size: 28upx;
		padding: 10upx 20upx;
		background: #eee;
		
		margin-right: 20upx;
		margin-bottom: 20upx;
		border-radius: 10upx;
	}
</style>
